How do you pass data between sibling components that don't have a parent-child relationship?

We can pass data from child to parent using a callback function passed as a prop from parent to children, this callback will be called to update parent with the data in child component.

In such cases, you can use techniques like

1
lifting state up to a common ancestor
2
using a state management library like Redux, mobx
3
Use context api
4
employing a state management pattern like prop drilling.

In React, sibling components cannot directly share data with each other. However, they can communicate indirectly through a common parent component1. Here’s a basic approach. Store the shared state in the parent component: The parent component holds the state that needs to be shared among its child components.

Pass a callback function to one child component: This function updates the state of the parent component.

Pass the shared state to the other child component: The other child component receives the shared state as a prop.

In this example, when the button in ChildComponentA is clicked, the sendData method is called, which in turn calls the handleData method of ParentComponent (passed down as a prop), updating the state of ParentComponent with the data from ChildComponentA. This updated state is then passed to ChildComponentB as a prop.

This is a simple example, and there are other ways to share data among sibling components, such as using context or third-party state management libraries like Redux or MobX, depending on the complexity of your application

Difficulty: 5/10

Topics: state management, context API, event bus

Scenario Questions

0-2 years experience

1
You have two sibling components, A and B, that need to share a piece of text entered in A. How would you implement this without using a global store?
2
If you tried to lift state up to a common parent but the parent is a third‑party component you can’t modify, what alternative would you use to get the data from A to B?
3
What happens if you attempt to pass props directly from A to B using a ref?

2-5 years experience

1
In a feature you’re adding, Component X needs to notify its sibling Component Y about a user action, but the components are deep in different branches of the tree. Walk me through how you’d set this up and why you’d choose that approach.
2
You implemented a Context provider to share state between siblings, but after a recent refactor the UI stops updating. What could be causing the breakage?
3
Suppose you introduced an event emitter library to broadcast messages between siblings, and you notice memory leaks after navigating away. How would you debug and fix it?

5-8 years experience

1
Design a scalable solution for sharing real‑time data among many sibling components across multiple pages, considering performance and bundle size.
2
Compare using Redux, the Context API, and a custom pub/sub system for sibling communication in a large codebase. What trade‑offs would drive your choice?
3
How would you refactor an existing app that currently uses ad‑hoc callbacks between siblings to a more maintainable pattern without rewriting all components?

8+ years experience

1
Your organization is migrating from a monolithic React app to micro‑frontends. How would you ensure sibling components that previously relied on a shared store continue to communicate efficiently across bundle boundaries?
2
When planning long‑term architecture, how do you decide whether to introduce a global state solution versus keeping sibling communication localized, especially given cross‑team ownership?
3
Describe a strategy for deprecating a legacy event bus used for sibling communication while minimizing impact on downstream teams.

Follow-up Questions

❓Can you sketch the code you’d write for that solution?
❓What are the main pitfalls or edge cases you’d watch out for?
❓How would you verify that the data is correctly reaching the sibling component?